<template>
	<view>
		<index @ShowNews="ShowNews" v-if="PageCur=='index'"></index>
		<search v-if="PageCur=='search'"></search>
		<cases v-if="PageCur=='cases'"></cases>
		<news v-if="PageCur=='news'"></news>
		<me v-if="PageCur=='me'"></me>

		<view class="box">
			<view class="cu-bar tabbar bg-white shadow foot">
				<view class="action" @click="NavChange" data-cur="index">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='index'" src="../../static/logo.png"></image>
						<image v-if="PageCur != 'index'" src="../../static/logo.png"></image>
					</view>
					<view :class="PageCur=='index'?'color_main':'text-gray'">首页</view>
				</view>

				<view class="action" @click="NavChange" data-cur="search">
					<view class='cuIcon-cu-image'>
						<view class="cu-tag badge">22</view>
						<image v-if="PageCur=='search'" src="../../static/logo.png"></image>
						<image v-if="PageCur != 'search'" src="../../static/logo.png"></image>
					</view>
					<view :class="PageCur=='search'?'color_main':'text-gray'">分类1</view>
				</view>

				<view @click="NavChange" class="action text-gray add-action" data-cur="cases">
					<image class="logo_btn" mode="widthFix" src="../../static/logo.png"></image>
					<view :class="PageCur=='cases'?'color_main':'text-gray'">中间突出</view>
				</view>

				<view class="action" @click="NavChange" data-cur="news">
					<view class='cuIcon-cu-image'>
						<view class="cu-tag badge">12</view>
						<image v-if="PageCur=='news'" src="../../static/logo.png"></image>
						<image v-if="PageCur != 'news'" src="../../static/logo.png"></image>
					</view>
					<view :class="PageCur=='news'?'color_main':'text-gray'">分类2</view>
				</view>

				<view class="action" @click="NavChange" data-cur="me">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='me'" src="../../static/logo.png"></image>
						<image v-if="PageCur != 'me'" src="../../static/logo.png"></image>
					</view>
					<view :class="PageCur=='me'?'color_main':'text-gray'">个人中心</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	import index from "./index.vue";//首页
	import search from "./search.vue";
	import cases from "./main.vue";
	import news from "./news.vue";	
	import me from "./me.vue";	
	export default {
		components: {
			index,
			search,
			cases,
			news,
			me
		},
		data() {
			return {
				PageCur: 'index',
			};
		},
		methods: {
			ShowNews(e){
				this.PageCur = e;
			},
			NavChange: function(e) {

				this.PageCur = e.currentTarget.dataset.cur;

				if (this.PageCur == 'index') {
				} else if (this.PageCur == 'component') {
				} else if (this.PageCur == 'cases') {
				} else if (this.PageCur == 'news') {
				} else if (this.PageCur == 'me') {
				}
			}
		}
	}
</script>

<style lang="scss">
	.color_main{
		color: #000000;
		font-weight: 900;
	}
	.box {
		margin: 20upx 0;
	}
	.box view.cu-bar {
		margin-top: 20upx;
	}
	
	.logo_btn{
		width: 38*2rpx;
		height: 38*2rpx;
		position: absolute;
		z-index: 2;
		border-radius: 50%;
		top: -40rpx;
		left: 0rpx;
		right: 0;
		margin: auto;
		padding: 0;
	}
	.cu-bar.tabbar .action.add-action {
	    padding-top: 56rpx !important;
	}
</style>
